


<template>
	<div class="realTime" :style="{ height: `calc(100vh - ${setMainHeight}` }">
		<el-card class="box-card" :style="{ height: `calc(100vh - ${setMainHeight}` }" style="overflow: auto">
			<!-- 左侧树形结构 -->
			<!-- <div class="leftTree">
				<el-tree :data="treeData" node-key="id" :default-expand-all="true" :props="defaultProps"> </el-tree>
			</div> -->

			<!-- 右侧摄像头图片 -->
			<!-- class="pic" -->
			<!-- style="display: ruby" -->
			<div class="rightContainer" >
				<div
					class="monitorWindow"
					v-for="(item, index) in positionIpList"
					:key="item.id"
				>
					<MonitorScreen :pluginId="item.id" :ip="item.ip" :userName="item.userName" :password="item.password" :idx="index + 1" />
				</div>
				<!-- <div  v-for="item in videoList" :key="item.id" style="width: 33.3%;height: 33.3%">
					<video :id="item.id" controls autoplay muted width="100%" height="100%" style="object-fit: fill"></video>
				</div> -->
			</div>
		</el-card>
	</div>
</template> 

<script>
  import MonitorScreen from './MonitorScreen.vue'
  export default {
    name: "realTime",
    components: {MonitorScreen},
    data() {
      return {
		positionIpList: [
			{
				id: 'video0',
				ip: '192.168.1.66',
				userName: 'admin',
				password: 'toec,357',
			},
			{
				id: 'video1',
				ip: '192.168.1.61',
				userName: 'admin',
				password: 'toec,357',
			},
			{
				id: 'video2',
				ip: '192.168.1.62',
				userName: 'admin',
				password: 'toec,357',
			},
			{
				id: 'video3',
				ip: '192.168.1.63',
				userName: 'admin',
				password: 'toec,357',
			},
			{
				id: 'video4',
				ip: '192.168.1.64',
				userName: 'admin',
				password: 'toec,357',
			},
			{
				id: 'video5',
				ip: '192.168.1.65',
				userName: 'admin',
				password: 'toec,357',
			},
			{
				id: 'video6',
				ip: '192.168.1.67',
				userName: 'admin',
				password: 'toec,357',
			},
			{
				id: 'video7',
				ip: '192.168.1.68',
				userName: 'admin',
				password: 'toec,357',
			},		

		],


      }
    },
	
    mounted() {


    },
    //销毁视频流
    beforeDestroy() {


    }
  };
</script>

<style scoped lang="scss">
.realTime {
	::v-deep .el-card__body {
		width: 100%;
		height: 100%;
		display: flex;

		.leftTree {
			flex: 1;
			margin-right: 20px;
		}
		.innerbox {
			flex: 9;
			display: flex;
			flex-wrap: wrap;
			.pic {
				width: 33.3%;
				height: 26vh;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.rightContainer {
			// flex: 1;
			height: 93vh;
			// background-color: pink;
			border: 1px solid #282c34;
			padding: 4px;
			border-left: none;
			display: ruby;
			flex-wrap: wrap;
			justify-content: space-between;

			.monitorWindow {
			width: 200px;
			height: 136px;
			border: 1px solid #000;
			background-color: #ccc;
			margin-bottom: 4px;

			&.active {
				border: 3px solid #eb2b06;
				background-color: #fff;
			}
			}
		}		
	}
}
</style>